{{! Sidebar lobby widgets }}
<div class="mt-4 relative flex flex-col mx-5">
    <div class="flex flex-row w-full space-x-2 space-y-0 mb-2">
        <div style="width: 40%" id="sbr_ele_status">
            <div class="widget w-full p-2.5 rounded-lg border border-base-200">
                <div class="flex flex-row items-center justify-between">
                    <div class="flex flex-col text-left">
                        <div class="text-xs uppercase text-base-content truncate">
                            Status
                        </div>
                        <div class="text-lg font-bold">
                            ...
                        </div>
                    </div>
                    <svg class="stroke-current text-info" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
        </div>
        <div style="width: 60%">
            <button type="button" class="widget w-full p-2.5 rounded-lg border border-base-200 hover:bg-base-200 focus:outline-none" onclick="sbr_copy_url()">
                <div class="flex flex-row items-center justify-between">
                    <div class="flex flex-col text-left">
                        <div class="text-xs uppercase text-base-content truncate">
                            Lobby Code
                        </div>
                        <div class="text-lg font-bold" id="sidebar_game_code">
                            {{ slug_2 }}
                        </div>
                    </div>
                    <svg class="stroke-current text-secondary" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
                    </svg>
                </div>
            </button>
        </div>
    </div>
    <div class="flex flex-row w-full space-x-2 space-y-0 mb-2">
        <div style="width: 32%">
            <div class="widget w-full p-2.5 rounded-lg border border-base-200">
                <div class="flex flex-row items-center justify-between">
                    <div class="flex flex-col">
                        <div class="text-xs uppercase text-base-content truncate">
                            Players
                        </div>
                        <div class="text-lg font-bold truncate" id="sbr_ele_players_ctn">
                            ...
                        </div>
                    </div>
                    <svg class="stroke-current text-accent" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                </div>
            </div>
        </div>
        <div style="width: 32%">
            <div class="widget w-full p-2.5 rounded-lg border border-base-200">
                <div class="flex flex-row items-center justify-between">
                    <div class="flex flex-col">
                        <div class="text-xs uppercase text-base-content truncate">
                            Rooms
                        </div>
                        <div class="text-lg font-bold truncate" id="sbr_ele_rooms_ctn">
                            ...
                        </div>
                    </div>
                    <svg class="stroke-current text-primary" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z" />
                    </svg>
                </div>
            </div>
        </div>
        <div style="width: 32%">
            <div class="widget w-full p-2.5 rounded-lg border border-base-200">
                <div class="flex flex-row items-center justify-between">
                    <div class="flex flex-col">
                        <div class="text-xs uppercase text-base-content truncate">
                            Games
                        </div>
                        <div class="text-lg font-bold truncate" id="sbr_ele_games_ctn">
                            ...
                        </div>
                    </div>
                    <svg class="stroke-current text-success" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>